<link rel="stylesheet" href="basics.css">
<body></body>
<script src="../../dist/DragSelect.js"></script>
<script>
    window.cursorStartDiff = [];
    window.cursorMoveDiff = [];
    window.cursorPosMove = [];
    window.cursorPosStart = [];

    /**
     * Utility method that returns the cursor position difference between start and now
     * @param {boolean} [usePreviousCursorDifference] if true, it will output the cursor position difference between the previous selection and now
     * @param {boolean} [useAreaPositions] if true, it will use cursor positions relative to the area
     * @return {Vect2}
     */
     const customPosDiffCalc = (usePreviousCursorDifference, useAreaPositions, ds) => {
      const posA = useAreaPositions
      ? ds.getCurrentCursorPositionArea()
      : ds.getCurrentCursorPosition()
    const posB = usePreviousCursorDifference
      ? useAreaPositions
        ? ds.getPreviousCursorPositionArea()
        : ds.getPreviousCursorPosition()
      : useAreaPositions
      ? ds.getInitialCursorPositionArea()
      : ds.getInitialCursorPosition()

      return {
        x: posA.x - posB.x,
        y: posA.y - posB.y
      }
    }

    const ds = new DragSelect({});

    ds.subscribe('DS:start', ({ event }) => {
      const diff = customPosDiffCalc(true, false, ds);
      cursorStartDiff.push(diff);
      cursorPosStart.push({ x: event.clientX, y: event.clientY });
    })

    ds.subscribe('DS:update', ({ event }) => {
      const diff = customPosDiffCalc(false, false, ds);
      cursorMoveDiff.push(diff);
      cursorPosMove.push({ x: event.clientX, y: event.clientY });
    })
</script>
